<template>
  <div>
    <div class="item-top">
      <!-- 订单导航切换 -->
      <w-order-tab @on-tab="onSelectTab"></w-order-tab>
      <!-- 订单搜索 -->
      <div class="search">
        <input class="form-input" type="text" placeholder="订单号/商品名称" v-model="orderText" @keyup.enter.prevent="onSearchOrder">
        <button class="form-button" type="button" @click="onSearchOrder">搜 索</button>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="item-content">
      <div class="order-container">
        <title-bar :columns="columns"></title-bar>
        <!--暂无订单  -->
        <div v-if="orderFormList && !orderFormList.length">
          <div class="bgImg"></div>
        </div>
        <!--全部订单  -->
        <div v-for="(orderAll, index) in orderFormList" :key="index" v-else>
           <order-item :order-all="orderAll" @on-refresh="onRefreshAllOrder" :options="delOrderList"></order-item> 
        </div>
        <!--分页  -->
        <div class="mt30" v-if="totalPage > 1">
          <w-paging :current="currentPage" :total="totalPage" @on-page="onPage"></w-paging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import titleBar from './components/TitleBar.vue'
  import orderItem from './components/OrderItem.vue'
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import { apiOrderAll } from 'js/api'

  export default {
    data() {
      return {
        columns: [ // 表格头部标题
          { 'col': '货品', 'width': '37.5%' },
          { 'col': '单价(元)', 'width': '12.5%' },
          { 'col': '数量', 'width': '12.5%' },
          { 'col': '总金额(元)', 'width': '12.5%' },
          { 'col': '订单状态', 'width': '12.5%' },
          { 'col': '交易操作', 'width': '12.5%' }
        ],
        orderText: '', // 搜索查询内容
        orderFormList: {}, // 全部订单列表
        currentPage: 1, // 当前页
        totalPage: 0, // 总页数
        isSearch: false // 搜索与全部订单分页标识，false为搜索，true为全部
      }
    },
    created() {
      if (this.$route.query.status) {
        this.selectTabOrderStatus(this.$route.query.status)
      }
      this.onRefreshAllOrder()
      this.fetchSelectdictionaryDataByTypeId()
    },
    computed: {
      ...mapGetters(['token', 'curStatus', 'delOrderList']),
      orderStatus() {
        // 如果点击过状态，则获取点击的状态；如果没有点击过，则先从url中获取状态，没有获取到则设置为空字符串
        return this.curStatus === -1 ? (this.$route.query.status || '') : this.curStatus
      }
    },
    methods: {
      ...mapActions(['fetchOrderStatusCount', 'fetchSelectdictionaryDataByTypeId']),
      ...mapMutations(['selectTabOrderStatus']),
      // 全部订单的请求
      fetchAllOrder(currentPage, orderStatus, vagueSearchVal) {
        apiOrderAll(this.token, currentPage, orderStatus, vagueSearchVal).then(data => {
          this.orderFormList = data.orderFormList
          this.totalPage = data.totalPageCount
          // if (this.isSearch && this.orderText && currentPage == 1) {
          //   this.$toast('搜索成功')
          // }
        })
      },
      // 搜索订单
      onSearchOrder() {
        this.$toast('搜索成功')
        this.isSearch = true
        this.currentPage = 1
        this.selectTabOrderStatus(-1)
        this.searchOrderList()
      },
      // 点击获取不同状态下的订单列表信息
      onSelectTab(status) {
        this.isSearch = false
        this.currentPage = 1
        this.fetchAllOrder(this.currentPage, this.orderStatus)
        this.selectTabOrderStatus(status)
      },
      // 点击分页
      onPage(index) {
        this.currentPage = index
        if (this.isSearch) {
          this.searchOrderList()
        } else {
          this.fetchAllOrder(index, this.orderStatus)
        }
      },
      // 点击搜索，重新加载订单列表
      onRefreshAllOrder() {
        this.fetchAllOrder(this.currentPage, this.orderStatus)
        this.fetchOrderStatusCount(this.token)
      },
      // 搜索订单页面
      searchOrderList() {
        this.fetchAllOrder(this.currentPage, '', $.trim(this.orderText))
      }
    },
    components: {
      titleBar,
      orderItem
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .search {
    height: 51px;
    background-color: #fff;
    padding: 10px 20px;
  }
  .bgImg {
    background-image: url(../../assets/nullIcon/icon_null.png);
    margin: 50px auto auto;
    width: 310px;
    height: 270px;
    background-repeat: no-repeat;
    text-align: center;
    background-size: contain;
    background-position: 50% 50%;
  }
  .form-input {
    border: 0;
    padding-left: 5px;
    height: 31px;
    box-sizing: border-box;
    width: 320px;
    outline: 0;
    float: left;
    background-color: #f6f6f6;
  }

  .form-button {
    border: 1px solid #ddd;
    width: 81px;
    height: 31px;
    background-color: #fff;
    color: #444;
    outline: 0;
    vertical-align: middle;
    text-align: center;
    cursor: pointer
  }

  .order-container {
    margin: 10px 0 0 0;
  }

  .mt30 {
    margin-top: 30px;
  }

  .orderItem {
    text-align: center;
    background-color: $color-white;
    padding: 30px;
  }
</style>